<template>
	<div class="tl fontc0" id="balance">

		<mt-header fixed title="资金明细">
			<router-link to="/mine" slot="left">
				<mt-button icon="back"> </mt-button>
			</router-link>
		</mt-header>

		<main class="mt40">
			<mt-navbar fixed class="mt30" v-model="selected">
				<mt-tab-item id="1">
					<span class="fs14">现金明细</span>
				</mt-tab-item>
				<mt-tab-item id="2">
					<span class="fs14">积分明细</span>
				</mt-tab-item>
			</mt-navbar>
			<!-- tab-container -->
			<ul v-show="selected==='1'" v-infinite-scroll="loadCash" infinite-scroll-disabled="cashAlldone"
			 infinite-scroll-distance="100">
				<li class="tc pb20 pt10">
					<span class="fs16 ">{{remain.margin}}</span>
					<span class="fontc3 fs12">元(冻结保证金)</span>
				</li>
				<li class="bgwhite pl20 pr20" :key="idx" v-for="(item,idx) in cashList">
					<p class="clearfix lh25 fs14 pt15">
						<span class="fl">{{item.remark}}</span>
						<span class="fr" :class="item.typeDetail>=0?'fontred':'green'">{{item.typeDetail>=0?'+':'-'}}{{item.money}}￥</span>
					</p>
					<p class="lh20 fontc2 fs12 pb10"><span>{{item.createTime}}</span></p>
				</li>
				<li v-show="this.cashLoading">
					<div class="clearfix load-icon-wrap pt20 pb20">
						<mt-spinner class="fl" type="fading-circle"></mt-spinner>
						<span class="fl lh30 ml20">加载中...</span>
					</div>
				</li>
				<li class="tc" v-show="this.cashAlldone">
					<span class="lh50 fontc2"> - 现金明细，全部加载完了 - </span>
				</li>
			</ul>
			<ul v-show="selected==='2'" v-infinite-scroll="loadScore" infinite-scroll-disabled="scoreAlldone"
			 infinite-scroll-distance="100">

				<li class="tc pb20 pt10">
					<span class="fs16 ">{{remain.marginScore}}</span>
					<span class="fontc3 fs12">积分(冻结保证金)</span>
				</li>

				<li class="bgwhite pl20 pr20 " :key="idx" v-for="(item,idx) in scoreList">
					<p class="clearfix lh25 fs14 pt15">
						<span class="fl">{{item.remark}}</span>
						<span class="fr" :class="item.typeDetail>=0?'fontred':'green'">{{item.typeDetail>=0?'+':'-'}}{{item.score}}分</span>
					</p>
					<p class="lh20 fontc2 fs12 pb10"><span>{{item.createTime}}</span></p>
				</li>
				<li v-show="this.scoreLoading">
					<div class="clearfix load-icon-wrap pt20 pb20">
						<mt-spinner class="fl" type="fading-circle"></mt-spinner>
						<span class="fl lh30 ml20">加载中...</span>
					</div>
				</li>
				<li class="tc" v-show="this.scoreAlldone">
					<span class="lh50 fontc2"> - 积分明细，全部加载完了 - </span>
				</li>
			</ul>
		</main>
	</div>
</template>
<script>
	import axios from "axios";

	import {
		MessageBox,
		Toast,
		Actionsheet,
		Navbar,
		TabItem,
		TabContainer,
		TabContainerItem,
		InfiniteScroll,
		Spinner
	} from "mint-ui";

	export default {
		name: "Banlance",
		data() {
			return {
				remain: {},

				selected: "1",

				cashLoading: false,
				cashList: [],
				cashOffset: 0,
				cashPage: 0,
				cashPagesize: 10,
				cashAlldone: false,

				scoreLoading: false,
				scoreList: [],
				scoreOffset: 0,
				scorePage: 0,
				scorePagesize: 10,
				scoreAlldone: false
			};
		},
		components: {
			"mt-navbar": Navbar,
			"mt-tab-item": TabItem,
			"mt-tab-container": TabContainer,
			"mt-tab-container-item": TabContainerItem
		},
		created() {
			this.loadRemain();
		},
		methods: {
			loadCash() {
				if (this.cashLoading === true) return;
				if (this.cashAlldone === true) return;
				if (this.selected !== "1" && this.cashList.length > 0) return;

				this.cashLoading = true;
				axios({
					method: "get",
					url: "/user/finance/findFlowList.do",
					params: {
						type: "money",
						offset: this.cashOffset,
						size: this.cashPagesize
					}
				})
					.then(res => {
						res = res.data;
						if (res.code === 200) {
							if (res.data.length === 0) {
								this.cashAlldone = true;
							} else {
								this.cashList = [...this.cashList, ...res.data];
							}
							this.cashPage += 1;
							this.cashOffset = this.cashPage * this.cashPagesize;
						} else if (res.code === 503) {
							this.$router.push({
								path: "/login"
							})
						} else {
							MessageBox.alert(res.msg, "现金明细");
						}
					})
					.then(() => {
						this.cashLoading = false;
					});
			},
			loadScore() {
				if (this.scoreLoading === true) return;
				if (this.scoreAlldone === true) return;
				if (this.selected !== "2" && this.scoreList.length > 0) return;
				this.scoreLoading = true;
				axios({
					method: "get",
					url: "/user/finance/findFlowList.do",
					params: {
						type: "score",
						offset: this.scoreOffset,
						size: this.scorePagesize
					}
				})
					.then(res => {
						res = res.data;
						if (res.code === 200) {
							if (res.data.length === 0) {
								this.scoreAlldone = true;
							} else {
								this.scoreList = [...this.scoreList, ...res.data];
							}
							this.scorePage += 1;
							this.scoreOffset = this.scorePage * this.scorePagesize;
						} else if (res.code === 503) {
							this.$router.push({
								path: "/login"
							})
						} else {
							MessageBox.alert(res.msg, "积分明细");
						}
					})
					.then(() => {
						this.scoreLoading = false;
					});
			},
			loadRemain() {
				axios({
					method: "post",
					url: "/user/finance/findMain.do"
				}).then(res => {
					res = res.data;
					if (res.code === 200) {
						this.remain = res.data;
					} else if (res.code === 503) {
						this.$router.push({
							path: "/login"
						})
					} else {
						MessageBox.alert(res.msg, "加载余额");
					}
				});
			}
		},
		filters: {}
	};
</script>
<style scoped>
	ul {
		margin-top: 90px;
	}

	li {
		border-bottom: 1px solid #ddd;
	}

	.load-icon-wrap {
		margin-left: 30%;
	}
</style>